import React, { Component, Fragment } from 'react'
import { Swiper, Icon, Grid } from 'react-vant';
import Navbers from '../../Components/Navbers';
// import '../../api/index'
// import axios from '../../req'
import { Sticky } from 'react-vant';
import { connect } from 'react-redux'
import * as actions from '../../redux/axtions/actions'
import { bindActionCreators } from 'redux';
// import isLogin from '../../Utils/isLogin';
class Home extends Component {
  state = {
    dataArr: []
  }
  // 挂载完毕后
  componentDidMount() {
    this.props.createReqDataAction();
  }
  render() {
    console.log('UI组件的props', this.props);
    const { dataArr } = this.props
    return (
      <Fragment>
        <Sticky offsetTop={0.001}>
          <Navbers></Navbers>
        </Sticky>
        <Swiper className="my-swipe" autoplay={3000}>
          <Swiper.Item>1</Swiper.Item>
          <Swiper.Item>2</Swiper.Item>
          <Swiper.Item>3</Swiper.Item>
          <Swiper.Item>4</Swiper.Item>
        </Swiper>
        <div className="guarantee">
          <dl><dt><Icon name="gold-coin-o" /></dt><dd>考拉自营</dd></dl>
          <dl><dt><Icon name="gold-coin-o" /></dt><dd>全球直采</dd></dl>
          <dl><dt><Icon name="gold-coin-o" /></dt><dd>假一赔十</dd></dl>
          <dl><dt><Icon name="gold-coin-o" /></dt><dd></dd>后顾无忧</dl>
        </div>
        <Grid columnNum={5}>
          {Array.from({ length: 10 }, (_, i) => (
            <Grid.Item key={i} icon="photo-o" text="文字" />
          ))}
        </Grid>
        <div className="body">
          {
            dataArr && dataArr.length ? dataArr.map((item, index) => {
              return (
                <dl key={item.id}>
                  <dt>
                    <img src={item.img} alt="" />
                  </dt>
                  <dd>
                    {item.test}
                  </dd>
                </dl>
              )
            }) : '暂无数据'
          }
        </div>
      </Fragment>
    )
  }
}
const mapStateToProps = (state) => {
  const { dataArr } = state.reducer1
  return { dataArr: dataArr }
}
const mapDispatchToProps = (dispatch) => {
  return bindActionCreators(actions, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(Home) 
